<script setup lang="ts">
import BtnWithDropdown from "@renderer/view/components/components/BtnWithDropdown.vue";
import { computed, inject, ref } from "vue";
import { useSystemSettingStore } from "@renderer/store/pinia/systemSetting";
import { postRequest } from "@renderer/api/request";
import { EnumOpType} from "@renderer/assets/types";
import API from "@renderer/api/api";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";
const {
  activeViewRef: activeView
} = getActiveTabViewOp()
const systemSettingStore = useSystemSettingStore();
const autoWindow = {
  part: 'default',
  windowWidth: 0,
  windowCenter: 0,
  shortcut: 'f1'
}
const windowSettingArr = computed(() => {
  const customSetting = {
    part: 'custom',
    windowWidth: 0,
    windowCenter: 0,
    shortcut: ''
  }
  return  [
    autoWindow,
    ...Object.values(systemSettingStore.windowSetting),
    customSetting
  ];
});
const windowSetting = ref(autoWindow)

const invertWhite = ref(false)

const showCustomModal  = ref(false)

const customWindow = ref({
  windowWidth: 0,
  windowCenter: 0,
})

const selectInvert = (val) => {
  invertWhite.value = val;
  const viewId = activeView.value.viewId;
  postRequest(API.setInvertWhite, {
    viewMode: activeView.value.viewMode,
    groupId: activeView.value.groupId,
    viewId,
    viewType: activeView.value.viewType,
    value: val
  });
}

const confirmCustomWindow = () => {
  showCustomModal.value = false;
  const viewId = activeView.value.viewId;
  postRequest(API.setWindow, {
    viewId,
    viewMode: activeView.value.viewMode,
    groupId: activeView.value.groupId,
    viewType: activeView.value.viewType,
    windowWidth: customWindow.value.windowWidth,
    windowCenter: customWindow.value.windowCenter,
  });
}

const selectWindow = (windowObj) => {
  if(windowObj.part === 'custom') {
    showCustomModal.value = true;
    return;
  }
  const viewId = activeView.value.viewId;
  postRequest(API.setWindow, {
      viewId,
      viewMode: activeView.value.viewMode,
      groupId: activeView.value.groupId,
      viewType: activeView.value.viewType,
      windowWidth: windowObj.windowWidth,
      windowCenter: windowObj.windowCenter,
  });
}
const handleClick = (windowObj) => {
  if(windowObj.part === 'custom') {
    showCustomModal.value = true;
    return;
  }
}
</script>

<template>
  <btn-with-dropdown
    tips="window"
    :op-type="{
      type: EnumOpType.window,
      subType: ''
    }"
    icon="mdi-circle-half-full">
    <template #dropdownSlot>
      <v-card >
        <v-card-text>
          <v-radio-group
            @update:model-value="selectWindow"
            v-model="windowSetting">
            <v-radio v-for="item in windowSettingArr"
                     @click="handleClick(item)"
                     :key="item.part" :value="item">
                            <template v-slot:label>
                                  <div class="w-[150px] flex justify-space-between">
                                    <span>{{item.part}}</span>
                                    <span>{{item.shortcut}}</span>
                                  </div>
                            </template>
            </v-radio>
          </v-radio-group>

          <v-divider :thickness="4"></v-divider>


          <v-checkbox  v-model="invertWhite"
                       hide-details
                       label="反白"
                       @update:model-value="selectInvert"></v-checkbox>

        </v-card-text>
      </v-card>
    </template>
  </btn-with-dropdown>

  <v-dialog
    v-model="showCustomModal"
    width="auto"
  >
    <v-card
      width="400"
    >

      <v-card-title class="d-flex justify-space-between align-center">
        <div class="text-h5 text-medium-emphasis ps-2">
          设置窗宽窗位
        </div>

        <v-btn
          icon="mdi-close"
          variant="text"
          @click="showCustomModal = false"
        ></v-btn>
      </v-card-title>

      <v-card-text>
        <v-form>
            <v-number-input   v-model="customWindow.windowWidth"
                                       label="Window Width"></v-number-input>

          <v-number-input
            v-model="customWindow.windowCenter"
            label="Window Center"
          ></v-number-input>

          <v-btn class="mt-2"
                 block
                 @click="confirmCustomWindow">Submit</v-btn>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<style scoped>

</style>
